<template>
	<view style="background-color: #fff;">
		<view style="height: 1000px;">
			<view class="text-clz"> 实时监测 车辆ID:{{carId}}</view>

			<br><br>

			<view class="text1-clz">转速(r/s): {{speed}}&nbsp;&nbsp;&nbsp;<br>温度: {{tem}}&nbsp;&nbsp;&nbsp;光照: {{light}}&nbsp;&nbsp;&nbsp;<br>
				<!-- 红外警报: <view :class="hw? 'ys1':'ys2'"></view>
			&nbsp;&nbsp;&nbsp;烟雾报警: <view :class="yw? 'ys1':'ys2'"></view> -->
			</view>

			<br><br>

			<view style="display: flex;">
				<view @click="Click1" :class="is_chart1 ? 'Box1':'Box'">
					温度
				</view>
				<!-- <view @click="Click2" :class="is_chart2 ? 'Box1':'Box'">
					电压
				</view> -->
				<view @click="Click3" :class="is_chart3 ? 'Box1':'Box'">
					光照
				</view>
			</view>

			<view class="charts-box" v-show="is_chart1">
				<qiun-data-charts type="line" :opts="opts1" :chartData="chartData1" :animation="is_animation"
					:reshow="is_chart1" />
				<qiun-data-charts type="column" :opts="opts2" :chartData="chartData1" :animation="is_animation"
					:reshow="is_chart1" />
			</view>

			<!-- <view class="charts-box" v-show="is_chart2">
				<qiun-data-charts type="line" :opts="opts1" :chartData="chartData2" :animation="is_animation"
					:reshow="is_chart2" />
				<qiun-data-charts type="column" :opts="opts2" :chartData="chartData2" :animation="is_animation"
					:reshow="is_chart2" />
			</view> -->

			<view class="charts-box" v-show="is_chart3">
				<qiun-data-charts type="line" :opts="opts1" :chartData="chartData3" :animation="is_animation"
					:reshow="is_chart3" />
				<qiun-data-charts type="column" :opts="opts2" :chartData="chartData3" :animation="is_animation"
					:reshow="is_chart3" />
			</view>

			<br><br><br>
		</view>
	</view>
</template>

<script>
	import store from '@/store/index.js'; //需要引入store
	export default {
		data() {
			return {
				// show1: true,
				// show2: false,
				// carId: '',
				speed: '',
				light: '',
				tem: '',
				volt: '',
				hw: true,
				yw: true,
				is_chart1: true,
				// is_chart2: false,
				is_chart3: false,
				is_animation: false,
				chartData1: {
					categories: [],
					series: []
				},
				chartData3: {
					categories: [],
					series: []
				},
				tmpData: [{
						categories: [],
						series: [{
							name: '温度',
							data: []
						}]
					},
					{
						categories: [],
						series: [{
							name: '光照',
							data: []
						}]
					}
				],
				opts1: {
					update: true,
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					xAxis: {
						// 标记线 实solid  虚dash
						gridType: "dash",
						dashLength: 2
					},
					yAxis: {
						data: [{
							// min: 0
						}]
					},
					extra: {
						line: {
							type: "straight",
							// type: "curve",
							width: 2
						}
					}
				},

				opts2: {
					update: true,
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					xAxis: {
						disableGrid: true
					},
					yAxis: {
						data: [{
							// min: 0
						}]
					},
					extra: {
						column: {
							// group 分组柱状图  stack 堆叠柱状图  meter温度计式图
							type: "group",
							activeBgColor: "#000000",
							activeBgOpacity: 0.08
						}
					}
				},
			}
		},

		onLoad() {
			// this.getdata()
		},

		watch: {

		},

		methods: {
			dateFormat(value) {
				var date = new Date(value); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				//var year = date.getFullYear();
				//var month = ("0" + (date.getMonth() + 1)).slice(-2);
				//var sdate = ("0" + date.getDate()).slice(-2);
				// var hour = ("0" + date.getHours()).slice(-2);
				//console.log(date.getMinutes())
				var minute = ("0" + date.getMinutes()).slice(-2);
				var second = ("0" + date.getSeconds()).slice(-2);
				// 拼接
				var result = minute + ":" + second;
				// 返回

				return result;
			},
			Click1() {
				if (!(this.is_chart1)) {
					this.is_chart1 = true
					// this.is_chart2 = false
					this.is_chart3 = false
					this.chartData1.series = []
					setTimeout(() => {
						this.chartData1 = this.tmpData[0]
					}, 500)
				}
			},

			// Click2() {
			// 	if (!(this.is_chart2)) {
			// 		this.is_chart1 = false
			// 		this.is_chart2 = true
			// 		this.is_chart3 = false
			// 		this.chartData2.series = []
			// 		setTimeout(() => {
			// 			this.chartData2 = this.tmpData[1]
			// 		}, 500)
			// 	}
			// },

			Click3() {
				if (!(this.is_chart3)) {
					this.is_chart1 = false
					// this.is_chart2 = false
					this.is_chart3 = true
					this.chartData3.series = []
					setTimeout(() => {
						this.chartData3 = this.tmpData[1]
					}, 500)
				}
			}
		},
		computed: {
			allData() {
				return store.state.allData
			},
			carId() {
				return store.state.carId
			}
		},
		watch: {
			carId: {
				deep: true,
				handler(newval, oldval) {
					this.carId = newval
				}
			},
			allData: {
				deep: true,
				handler() {
					if (store.state.carId == store.state.allData.name) {
						let tem = Math.floor(store.state.allData.tem * 100) / 100
						let lux = Math.floor(store.state.allData.lux * 100) / 100
						
						let time = (new Date()).valueOf();
						
						this.tmpData[0].categories.push(this.dateFormat(time))
						this.tmpData[1].categories.push(this.dateFormat(time))
						// this.tmpData[2].categories.push(this.dateFormat(store.state.allData.time))

						this.tmpData[0].series[0].data.push(tem)
						this.tem = tem
						this.tmpData[1].series[0].data.push(lux)
						this.light = lux
						// this.tmpData[2].series[0].data.push(store.state.allData.lux)
						// this.light = store.state.allData.light

						this.speed = store.state.allData.speed

						if (this.tmpData[0].series[0].data.length > 6) {
							this.tmpData[0].series[0].data.shift()
						}
						if (this.tmpData[1].series[0].data.length > 6) {
							this.tmpData[1].series[0].data.shift()
						}
						// if (this.tmpData[2].series[0].data.length > 8) {
						// 	this.tmpData[2].series[0].data.shift()
						// }
						if (this.tmpData[0].categories.length > 6) {
							this.tmpData[0].categories.shift()
						}
						if (this.tmpData[1].categories.length > 6) {
							this.tmpData[1].categories.shift()
						}
						// if (this.tmpData[2].categories.length > 8) {
						// 	this.tmpData[2].categories.shift()
						// }

						this.chartData1 = JSON.parse(JSON.stringify(this.tmpData[0]))
						// this.chartData2 = JSON.parse(JSON.stringify(this.tmpData[1]))
						this.chartData3 = JSON.parse(JSON.stringify(this.tmpData[1]))
					}
				}
			}
		}
	}
</script>

<style>
	.ys1 {
		position: relative;
		margin-right: 10px;
		left: 5px;
		display: inline-block;
		vertical-align: middle;
		background-color: rgb(0, 255, 0);
		height: 30rpx;
		width: 30rpx;
	}

	.ys2 {
		margin-right: 10px;
		position: relative;
		left: 5px;
		display: inline-block;
		vertical-align: middle;
		background-color: rgb(255, 0, 0);
		height: 30rpx;
		width: 30rpx;
	}

	.text-clz {
		background-color: #1cbbb4;
		margin-left: 5px;
		color: #e61515;
		width: calc(100% - 5px - 5px) !important;
		height: 40px;
		line-height: 40px;
		font-size: 30px;
		margin-top: 20px;
		margin-bottom: 5px;
		text-align: center;
		margin-right: 5px;
	}

	.text1-clz {
		font-size: 14px;
		text-align: center;
	}

	.charts-box {
		width: 100%;
		height: 300px;
	}

	.Box {
		width: 50%;
		height: 50px;
		text-align: center;
		line-height: 50px;
		background-color: #FFFFFF;
		border-radius: 10px;
	}

	.Box1 {
		width: 50%;
		height: 50px;
		text-align: center;
		line-height: 50px;
		background-color: #FAC858;
		border-radius: 10px;
	}
</style>
